<!--
 * @Descripttion: 
 * @version: 
 * @Author: Pengxin
 * @Date: 2025-05-31 22:10:39
 * @LastEditors: Pengxin
 * @LastEditTime: 2025-06-01 21:20:39
-->
<template>
  <tn-popup
    v-model="show"
    height="506rpx"
    mode="bottom"
    :borderRadius="23"
    :closeable="false"
    :mask-closeable="false"
    backgroundColor="#18171A"
  >
    <view class="popup-content">
      <view class="title">青少年模式</view>
      <view class="description">
        为了呵护未成年人的健康成长，穿越次元特别推出青少年模式。此模式下部分功能无法正常使用，请监护人主动选择，并设置密码。
      </view>
      <view class="btn-container">
        <view class="custom-btn">
          <tn-button
            backgroundColor="transparent"
            width="100%"
            height="80rpx"
            fontColor="#ffffff"
            padding="30rpx 0"
            shape="round"
            @click="handleClose"
          >
            我知道了
          </tn-button>
        </view>
      </view>
    </view>
  </tn-popup>
</template>

<script>
export default {
  name: "RemindPopup",
  data() {
    return {
      show: true,
    }
  },
  mounted() {
    // 检查是否是第一次访问
    this.checkFirstVisit()
  },
  methods: {
    // 检查是否是第一次访问
    checkFirstVisit() {
      const hasVisited = uni.getStorageSync("hasVisitedBefore")
      if (!hasVisited) {
        this.show = true
        // 设置访问标记
        uni.setStorageSync("hasVisitedBefore", true)
      }
    },
    // 关闭弹窗
    handleClose() {
      this.show = false
    },
    // 提供给外部调用的显示方法
    open() {
      this.show = true
    },
  },
}
</script>

<style lang="scss" scoped>
.popup-content {
  padding: 40rpx 40rpx 60rpx;

  .title {
    font-size: 31rpx;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
    margin-bottom: 40rpx;
  }

  .description {
    font-size: 27rpx;
    color: rgba(255, 255, 255, 0.65);
    text-align: center;
    line-height: 1.6;
    margin-bottom: 60rpx;
  }

  .btn-container {
    padding: 15px 30rpx;
    .custom-btn {
      width: 100%;
      height: 80rpx;
      // # mp-wx

      background-image: url("/static/btn_bg.png");
      //endif
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }
}
</style>
